<template>
  <div class="app-container">
    <div class="app-home">

      <el-card class="form-container" shadow="never">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="提交订单" />
          <el-step title="支付订单" />
          <el-step title="平台发货" />
          <el-step title="确认收货" />
          <el-step title="完成评价" />
        </el-steps>
      </el-card>

    </div>
    <div>
      {{ "🧾基本信息" }}

      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column type="index" align="center" label="订单编号" width="213">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="发货流水单号" width="213">
          <template slot-scope="scope">
            <span>{{ scope.row.numberOrder }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户账号" width="210" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.Account }}</span>
          </template>
        </el-table-column>

        <el-table-column label="支付方式" property="pay" align="center" width="212">
          <template slot-scope="scope">
            {{ scope.row.pay }}
          </template>
        </el-table-column>

        <el-table-column label="订单来源" property="source" align="center" width="212">
          <template slot-scope="scope">
            {{ scope.row.source }}
          </template>
        </el-table-column>

        <el-table-column label="订单类型" property="state" align="center" width="212">
          <template slot-scope="scope">
            {{ scope.row.state }}
          </template>
        </el-table-column>

      </el-table>

      <!-- 第二个表格 -->

      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column type="index" align="center" label="配送方式" width="212">
          <template slot-scope="scope">
            {{ "暂无" }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="物流单号" width="212">
          <template slot-scope="scope">
            <span>{{ "暂无" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="自动确认收货时间" width="212" align="center">
          <template slot-scope="scope">
            <span>{{ "15天" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单可得优币" width="212" align="center">
          <template slot-scope="scope">
            <span>{{ 123456 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单可得成长值" property="pay" align="center" width="212">
          <template slot-scope="scope">
            {{ 123456 }}
          </template>
        </el-table-column>

        <el-table-column label="活动信息" property="source" align="center" width="212">
          <template slot-scope="scope">
            {{ "单品促销打折" }}
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 第三层 -->

    <div>
      {{ "🧾收获人信息" }}

      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column type="index" align="center" label="收货人" width="318">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="手机号码" width="318">
          <template slot-scope="scope">
            <span>{{ 8888888 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="邮政编码" width="318" align="center">
          <template slot-scope="scope">
            <span>{{ 51800 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="收货地址" width="318" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>

      </el-table>

    </div>

  </div>
</template>

<script>

import { getList } from '@/api/shopping'

export default {

  data() {
    return {
      list: null,
      listLoading: true,
      items: []

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then((response) => {
        this.list = response.data.items
        this.listLoading = false
      })
    }

  }
}

</script>

